<template>
	<view class="content">
		<Header color="black" />
		<view class="page-area">
			<view class="pageTitle">
				<view class="line1"></view>
				<text>热门资讯</text>
				<view class="line2"></view>
			</view>
			<view class="tabsBox">
				<u-tabs :list="cateList" @click="handleChange" lineColor="#fff"
				:activeStyle="{
					color: '#191919', 
					fontSize:'14px',
					fontWeight: 'bold',
				}"
				keyName="category"
				:inactiveStyle="{
					fontSize:'14px',
					color: '#828282', 
				}"></u-tabs>
			</view>
			<view class="list" v-if="list.length">
				<view class="item" v-for="item in list" :key="item.id" @click="handleToDetail(item.id)">
					<image :src="item.cover" mode=""></image>
					<text>{{item.title}}</text>
				</view>
				<u-loadmore class="loadmore" :status="status" v-if="pageNum > 1" />
			</view>
			<view class="null" v-else>
				<u-empty text="暂无内容" icon="/static/e.png" marginTop="100" ></u-empty>
			</view> 
		</view>
		<tabbar :index="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				pageNum:1,
				status: 'loadmore', 
				allData: false,
				categoryId:'',
				cateList: [],
				list:[]
			}
		},
		onLoad() {
			this.getCategory()
		},
		onReachBottom() {
			if (this.allData) {
				this.status = 'loading'
				this.pageNum++
				this.getList();
			}
		},
		// 分享给个人
		onShareAppMessage() { 
			return {
				// title: uni.getStorageSync("common_info").shareText,
				// imageUrl: uni.getStorageSync("common_info").sharesImage,
				title:'',
				imageUrl:''
			}
		},
		//分享朋友圈
		onShareTimeline() { 
			return {
				// title: uni.getStorageSync("common_info").shareText,
				// imageUrl: uni.getStorageSync("common_info").sharesImage,
				title:'',
				imageUrl:''
			}
		},
		methods: {
			handleChange(e){
				this.categoryId = e.id
				this.pageNum = 1
				this.getList() 
			},
			getList(){
				this.$http({
					url:"/umsArticle/paginQuery",
					method:"get",
					data:{
						categoryId:this.categoryId,
						pageSize:10,
						pageNum:this.pageNum
					}
				}).then(data=>{ 
					if (this.pageNum == 1) {
						this.list = data.list
					} else {
						this.list.push(...data.list) 
					}  
					if (data.totalPage > data.pageNum) {
						this.allData = true
						this.status = 'loading'
					} else {
						this.status = 'nomore' 
					    this.allData = false
					}
				})
			},
			getCategory(){
				this.$http({
					url:"/umsArticleCategory/paginQuery",
					method:"get",
					data:{
						pageSize:20
					}
				}).then(data=>{  
					this.cateList = data.list
					this.categoryId = data.list[0].id
					this.getList()
				})
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`./detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24rpx;
		.item{
			width: 49%;
			margin-bottom: 30rpx;
			image{
				display: block;
				width: 100%;
			}
			text{
				display: block;
				font-size: 24rpx;
				text-align: center;
				color: #333;
				margin-top: 30rpx;
			}
		}
	}
	 .pageTitle{
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 padding-top: 40rpx;
		 .line1{
			 width: 28rpx;
			 height: 4rpx;
			 background: linear-gradient( 270deg, #191919 0%, #FFFFFF 100%);
		 }
		 .line2{
			 width: 28rpx;
			 height: 4rpx;
			 background: linear-gradient( 270deg, #FFFFFF 0%, #191919 100%);
		 }
		 text{
			 font-weight: bold;
			 font-size: 32rpx;
			 margin: 0 20rpx;
		 }
	 }
</style>
